<template>
    <div class="store-group">
        <headBar class="head flex z-index-1 bg-white" isBack="show">
            <div slot="xm-header-center" class="tit">
                {{title}}
            </div>
        </headBar>
        <div class="store-top z-index-1">
            <div class="store-img ">
                <img :src="storeDetail.imageUrl">
            </div>
            <dl class="store-info flex">
                <dd class="flex-1">
                    <h3>
                        <i class="icon icon-dianpu"></i>
                        {{storeDetail.name}}
                        <span class="zy" v-if="storeDetail.supplierTypeId==1">自营</span>
                    </h3>
                    <p>主营：<span>{{storeDetail.mainBiz}}</span></p>
                </dd>
                <dd class="store-dd" v-show="!favoritesId" @click="favorites">
                    <i class="icon icon-shoucang"></i>
                    <span>收藏</span>
                </dd>
                <dd class="store-dd active" v-show="favoritesId" @click="cancalFavorites">
                    <i class="icon icon-shoucang"></i>
                    <span>已收藏</span>
                </dd>
            </dl>
            <div class="flex flex-pack-justify opts">
                <div class="flex-1 border-right" @click="clickSale">销量</div>
                <div class="flex-1">
                    <p @click="isShow=!isShow">价格</p>
                    <div class="sort-group" :class="{'hide': !isShow}">
                        <div class="border-bottom item" :class="{'active': form.priceSort=='desc'}"
                             @click="priceSort('desc')">由高到低
                        </div>
                        <div class="item" :class="{'active': form.priceSort=='asc'}" @click="priceSort('asc')">由低到高
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="goods-list"
             v-infinite-scroll="getWareList"
             infinite-scroll-distance="5">
            <ul class="cate-list flex">
                <li v-for="item in wareList" @click="openDetail(item.id)">
                    <div class="cell-img">
                        <img :src="item.imageThumb">
                    </div>
                    <div class="cell-info">
                        <h3 class="text-ellipsis">{{item.name}}</h3>
                        <div class="price">
                            <span v-if="isLogin">￥{{item.priceUnit_int}}.{{item.priceUnit_float}}/件</span>
                            <span v-if="!isLogin" @click.stop="toLogin">登录查看</span>
                            <i class="fr">{{item.numberPerBox}}{{item.unitName}}/件</i>
                        </div>
                        <div class="cell-tags">
                            <span v-show="item.numberInventory>0">现货</span>
                            <span v-show="item.pandaCoinStatus!=-1">熊猫币</span>
                            <span v-show="item.openPresale>0">可预售</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <section class="last" v-show="isLast">
            <div class="tit" style="font-size: .24rem">
                老板，已经到底了
            </div>
        </section>
        <xm-loading v-show="loading"></xm-loading>
    </div>
</template>
<script>
    export default {
        props: {},
        data() {
            return {
                title: '',
                loading:false,
                isShow: false,
                images: [],
                favoritesId: null, // 收藏id
                wareList: [],
                isLast: false,
                storeId: null,
                storeDetail: {},
                isLogin: !!Cookie.get('name'),
                form: {
                    salesSort: null,
                    priceSort: null,
                    supplierId: null,
                    pageNum: 1,
                    pageSize: 10
                }
            };
        },
        methods: {
            /**
             * 点击价格排序
             * @param <number> 排序规则
             * */
            priceSort: function (type) {
                this.isShow = false;
                this.form.pageNum = 1;
                this.form.priceSort = type;
                this.form.salesSort = null;
                this.getWareList();
            },
            /**
             * 点击销量排序
             * */
            clickSale: function () {
                this.isShow = false;
                this.form.pageNum = 1;
                this.form.salesSort = 'desc';
                this.form.priceSort = null;
                this.getWareList();
            },
            /**
             * 获取商品列表
             * */
            getWareList() {
                if (this.loading || this.isLast) {
                    return;
                }
                this.loading = true;
                this.form.siteId = Cookie.get('siteId');
                getWareList(this.form).then(data => {
                    this.loading = false;
                    if (data.returnCode == '000000') {
                        if (this.form.pageNum > 1) {
                            this.wareList = this.wareList.concat(data.result.wareList);
                        } else {
                            this.wareList = data.result.wareList;
                        }
                        //最后一页
                        if (data.result.wareList.length < this.form.pageSize) {
                            this.isLast = true;
                        }
                        this.form.pageNum++;
                    }
                })
            },
            /**
             * 打开商品详情
             * */
            openDetail(wareId) {
                this.$router.push({name: 'goodsDetail', params: {wareId: wareId}});
            },
            /**
             * 收藏店铺
             * */
            favorites() {
                if (this.isStore) {
                    return;
                }
                shopFavorites({supplierId: this.form.supplierId}).then(data => {
                    if (data.returnCode == '000000') {
                        Toast('收藏成功');
                        this.getShopFavoritesStatus();
                    } else {
                        Toast('收藏失败');
                    }
                });
            },
            /**
             * 取消收藏
             * */
            cancalFavorites() {
                cancelShopFavorites({id: this.favoritesId}).then(data => {
                    if (data.returnCode == '000000') {
                        Toast('取消成功');
                        this.getShopFavoritesStatus();
                    }
                });
            },
            /**
             * 获取店铺信息
             * */
            supplierInfo() {
                supplierInfo({supplierId: this.form.supplierId}).then(data => {
                    if (data.returnCode == '000000') {
                        this.storeDetail = data.result;
                        this.title = data.result.name;
                    }
                });
            },
            /**
             * 跳转登录页面
             * */
            toLogin(){
                this.$router.push({name: 'login'});
            },
            /**
             * 是否收藏
             * */
            getShopFavoritesStatus() {
                getShopFavoritesStatus({supplierId: this.form.supplierId}).then(data => {
                    if (data.returnCode == '000000' && data.result.favoritesId) {
                        this.favoritesId = data.result.favoritesId;
                    } else {
                        this.favoritesId = null;
                    }
                });
            }

        },
        filters: {},
        created() {
            this.form.supplierId = this.$route.params['storeId'];
            this.getWareList();
            this.supplierInfo();
            this.getShopFavoritesStatus();
            console.log(this.favoritesId);
        },
        mounted() {

        },
        components: {}
    };
</script>
<style lang="less" scoped>
    @import "./store.less";
    .cate-list li .cell-info .cell-tags{
        margin-bottom: .1rem;
    }
</style>
